<script setup lang="ts">
import type {BlogAndTagResult} from "@/apis";
import {getBlogs} from "@/apis/home";

// constants
const currentPage = ref(1);
const pageSize = ref(10);
const dataTotal=ref(0);
const router = useRouter()
const blogList = ref<BlogAndTagResult[]>([])
function getBlogData() {
  getBlogs({
    page: currentPage.value,
    size: pageSize.value,
    key: ''
  }).then(res=> {
    console.log(res)
    dataTotal.value = res.data.total;
    blogList.value = res.data.list as unknown as BlogAndTagResult[];
    console.log(blogList)
  })
}
function currentPageChange(val:number) {
  currentPage.value = val;
  getBlogData()
}
function pageSizeChange(val:number) {
  pageSize.value  = val;
  currentPage.value = 1
  getBlogData()
}
function gotoDetailView(blog: BlogAndTagResult) {
  console.log(blog)

  router.push({
    name: 'Detail',
    query:{
      id: blog.id
    }
  })
}
onMounted(()=> {
  getBlogData()
})
</script>

<template>
<!--<div>这是首页</div>-->
  <div class="page-main-container">
    <div class="page-blogs-container">
      <div class="blog-item-container" v-for="blog in blogList" :key="blog.id" @click="gotoDetailView(blog)">
        <vs-card>
          <template #title>
            <h3>{{blog.blogTitle}}</h3>
          </template>
          <template #img>
            <img class="blog-desc-img" :src="blog.coverUrl" alt="" />
          </template>
          <template #text>
            <p>{{blog.blogDesc}}</p>
          </template>
          <template #interactions>
<!--            <vs-button color="danger" icon>-->
<!--              <i class="bx bx-heart" />-->
<!--            </vs-button>-->
            <vs-button class="btn-chat" type="shadow">
              <i class="bx bx-chat" />
              <span class="span"> 54 </span>
            </vs-button>
          </template>
        </vs-card>
      </div>
    </div>
    <div class="my-pagination">
      <vs-pagination v-model:current-page="currentPage"
                     shape="circle"
                     :page-sizes="[10]"
                     :layout="['prev','pager','next','jumper','total']"
                     v-model:page-size="pageSize" progress :total="dataTotal"
      @update:page-size="pageSizeChange"
      @update:current-page="currentPageChange"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-pagination{
  margin-top: 16px;
}
.blog-item-container{
  margin-bottom:2vh;
  height:32vh;
  ::v-deep(.vs-card){
    margin: 0 auto;
    //max-width: 800px;
    flex: 1 1 auto;
  }
  ::v-deep(.vs-card-content){
    height: 100%;
  }
  &:not(:last-of-type){
    //margin-bottom: 4%;
  }
  margin-right: 12px;
}
.page-blogs-container{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
  align-items: flex-start;
  ::v-deep(.vs-card){
    height: 100%;
  }
  .blog-desc-img{
    height: auto;
  }
  ::v-deep(.vs-card__img){
    height: 60%;
  }
}
.page-main-container{

}
</style>
